<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
     <div class="flex justify-between mb20">
        <!-- <a-input-search v-model="queryParam.bannerName" placeholder="请输入banner名称" style="width:300px;" @search="handleSearch"/> -->
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </div>
      <s-table ref="table" size="default" :columns="columns" :data="loadData" rowKey="id">
        
        <div slot="pic" slot-scope="text, record">
          <img v-if="record.type == 2" :src="text" height="70" style="min-width: 150px;" preview="1"/>
          <video controls v-if="record.type == 1" :src="text" height="70" style="min-width: 150px;" preview="1"/>
        </div>
        <a-switch
          slot="state"
          slot-scope="text,record"
          :default-checked="record.state==1"
          @change="onChange($event, record.id)" />
        <div slot="action" slot-scope="text, record">
          <span class="text-btn blue" @click="handleEdit(record)">编辑</span>
        </div>
      </s-table>
    </a-card>
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </page-header-wrapper>
</template>

  <script>
  import { STable } from '@/components'
  import { bannerList, bannerAdd, bannerOff, bannerOn, bannerUpdate } from '@/api/banner'
  import CreateForm from './modules/form'
  export default {
    components: {
      STable,
      CreateForm
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
        mdl: null,
        columns: [
          {
            title: 'banner图片',
            dataIndex: 'url',
            scopedSlots: { customRender: 'pic' }
          },
          {
            title: '类型',
            dataIndex: 'typeName'
          },
          {
            title: '位置',
            dataIndex: 'positionName'
          },
          {
            title: '跳转类型',
            dataIndex: 'toTypeName'
          },
          {
            title: '状态',
            dataIndex: 'state',
            scopedSlots: { customRender: 'state' }
          },
          {
            table: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const that = this
          return bannerList(Object.assign(parameter, this.queryParam)).then(res => {
            that.tableLength = res.data.records.length
            return res.data
          })
        },
        tableLength: 0
      }
    },
    methods: {
      handleSearch () {
        // 刷新表格
        this.$refs.table.refresh(1)
      },
      edit (row) {
        // axios 发送数据到后端 修改数据成功后
        // 调用 refresh() 重新加载列表数据
        // 这里 setTimeout 模拟发起请求的网络延迟..
        setTimeout(() => {
          this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
        }, 1500)
      },
      handleAdd () {
        this.mdl = null
        this.$refs.createModal.startTime = ''
        this.$refs.createModal.endTime = ''
        this.$refs.createModal.toType = ''
        this.$refs.createModal.shopId = undefined
        this.$refs.createModal.fileList = []
        this.$refs.createModal.contentList = []
        this.visible = true
      },
      handleEdit (record) {
        this.visible = true
        this.mdl = { ...record }
      },
      handleOk () {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          // values.bannerUrl = values.srcSave
          delete values.srcSave
          if (!errors) {
            if (values.id > 0) {
              // 修改 e.g.
              bannerUpdate(values).then(res => {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()

                this.$message.info('修改成功')
              })
            } else {
              // 新增
              bannerAdd(values).then(res => {
                this.visible = false
                this.confirmLoading = false
                // 重置表单数据
                form.resetFields()
                // 刷新表格
                this.$refs.table.refresh()

                this.$message.info('新增成功')
              })
            }
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.visible = false
        this.$refs.createModal.fileList = []
        this.$refs.createModal.shopId = ''
        this.$refs.createModal.contentList = []
        const form = this.$refs.createModal.form
        form.resetFields() // 清理表单数据（可不做）
      },
      onChange (e, id) {
        console.log(e)
        console.log(id)
        if (e) {
          bannerOn({ id }).then(res => {
            // 刷新表格
            this.$refs.table.refresh()
          })
        } else {
          bannerOff({ id }).then(res => {
            // 刷新表格
            this.$refs.table.refresh()
          })
        }
      }
    }
  }
  </script>

  <style lang="less" scoped>
  .order-icon{
    display: block;
  }
  </style>
